<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>美丽说</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

    <!-- swiper -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

</head>

<body>
    <div class="page-group" id="home" style="width:100vw;">

        <div class="page">
            <!-- 头部 -->
            <link rel="stylesheet" href="./css/home.css">
            <!-- Left Panel with Reveal effect -->

            <header class="bar bar-nav header home-header">
                <div>
                    <span class="icon icon-search" for="search"></span>
                    <div class="Search">
                        <input type="text" placeholder="搜索" class="searchs open-panel" data-panel='#panel-js-demo'>
                    </div>
                    <span class="icon icon-code open-panel " data-panel='#panel-code'></span>
                </div>
                <a href="#"><span class="icon icon-message"></span></a>
            </header>
            <script>
                $(function () {
                    $(document).on("click", ".searchs", function () {
                        $.openPanel("#panel-js-demo");
                    });

                })

            </script>
            <!-- 底部导航条 -->
            <nav class="bar bar-tab nav-bottom">
                <a class="tab-item active" href="#">
                    <span class="icon icon_home"></span>
                    <span class="tab-label">首页</span>
                </a>
                <a class="tab-item" href="./class.html">
                    <span class="icon icon_class"></span>
                    <span class="tab-label">分类</span>
                </a>
                <a class="tab-item" href="./shop.html">
                    <span class="icon icon_shop"></span>
                    <span class="tab-label">购物车</span>
                </a>
                <a class="tab-item mine">
                    <span class="icon icon_mine"></span>
                    <span class="tab-label">我的</span>
                </a>
            </nav>

            <div class="pull-to-refresh-layer">
                <div class="down-update">下拉刷新页面</div>
            </div>
            <div class="content infinite-scroll-bottom  infinite-scroll pull-to-refresh-content" data-distance="100"
                data-ptr-distance="20">
                <!-- 默认的下拉刷新层 -->

                <script>
                    // 添加'refresh'监听器
                    $(document).on('refresh', '.pull-to-refresh-content', function (e) {
                        // 模拟2s的加载过程
                        setTimeout(function () {

                            // 加载完毕需要重置
                            $.pullToRefreshDone('.pull-to-refresh-content');
                        }, 2000);
                    });
                    $('.icon_mine').click(function () {
                        $.popup('.popup-about');
                    })
                    // 滚动监听顶部搜索框
                    $('.content').on('scroll', function () {
                        if ($(this).scrollTop() > 100) {
                            $('.home-header').css({
                                'background-color': 'white'
                            })
                        } else {
                            $('.home-header').css({
                                'background-color': 'transparent'
                            })
                        }
                    })
                </script>
                <!-- 轮播图 -->
                <div class="swiper-container head-container">
                    <div class="swiper-wrapper">

                    </div>
                    <div class="swiper-pagination"></div>
                    <ul>
                        <li>全场包邮</li>
                        <li>先行赔付</li>
                        <li>7天无忧退</li>
                        <li>退货补贴</li>
                    </ul>
                </div>
                <!-- 轮播ajax 请求 -->
                <script>
                    $(function () {
                        $.ajax({
                            url: './data/slide.json',
                            success: function (data) {
                                var arr = data.data.list
                                var str = ''
                                $(arr).each(function (index, item) {
                                    str += `
                                    <div class="swiper-slide">
                                    <img src="${item.image}"></img>    
                                    </div>
                                    `
                                })
                                $('.head-container .swiper-wrapper').html(str)
                                var mySwiper = new Swiper('.swiper-container', {
                                    autoplay: true,
                                    autoplay: {
                                        delay: 2000,
                                        disableOnInteraction: false,
                                    },
                                    loop: true,
                                    pagination: {
                                        el: '.swiper-pagination',
                                    },

                                })
                            }
                        })

                    })
                </script>

                <!-- 中间四个圆 -->
                <div class="item-four">

                </div>
                <script>
                    $(function () {
                        $.ajax({
                            url: './data/popular.json',
                            success: function (data) {
                                var arr = data.data.channel.list
                                var str = ''
                                $(arr).each(function (index, item) {

                                    str += `
                                    <a href="${item.link}">
                                        <img src="${item.image}"></img>
                                        <p>${item.title}</p>
                                    </a>
                                    `
                                })
                                $('.item-four').html(str)
                            }
                        })
                    })
                </script>

                <div class="item-hot">
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/181025_5a1l76g7gk4e110cb0f19egl4gk8g_750x420.jpg"
                        alt="">
                </div>

                <!-- 正在流行 -->
                <div class="item-popular">
                    <div class="pupular-head"><img
                            src="https://s2.mogucdn.com/mlcdn/c45406/170511_1c15g5c3g57d80j3d33dcjh697ifa_1125x120.jpg"
                            alt=""></div>
                    <div class="popular-content">
                        <div class="populars">
                        </div>
                        <div class="point">
                            <div class="point-active"></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <script>
                    $(function () {
                        $.ajax({
                            url: './data/popular.json',
                            success: function (data) {
                                var arr = data.data.popular.list
                                var str = ''
                                $(arr).each(function (index, item) {
                                    str += `<a href="${item.link}">
                                        <img src="${item.image}"></img>
                                        <p>${item.title}</p>
                                        </a>`
                                })
                                $('.popular-content .populars').html(str)
                            }
                        })
                        // 滚动监听顶部搜索框
                        $('.popular-content').on('scroll', function () {

                            if ($(this).scrollLeft() < 250) {
                                console.log($(this).scrollLeft())
                                $('.popular-content .point div').css('background-color', 'black')
                                $('.popular-content .point div').eq(0).css('background-color', '#ea0d51')
                            }

                            if ($(this).scrollLeft() > 250) {
                                console.log($(this).scrollLeft())
                                $('.popular-content .point div').css('background-color', 'black')
                                $('.popular-content .point div').eq(1).css('background-color', '#ea0d51')
                            }
                            if ($(this).scrollLeft() > 500) {
                                $('.popular-content .point div').css('background-color', 'black')
                                $('.popular-content .point div').eq(2).css('background-color', '#ea0d51')
                            }
                            if ($(this).scrollLeft() > 750) {
                                $('.popular-content .point div').css('background-color', 'black')
                                $('.popular-content .point div').eq(3).css('background-color', '#ea0d51')
                            }
                            if ($(this).scrollLeft() > 1000) {
                                $('.popular-content .point div').css('background-color', 'black')
                                $('.popular-content .point div').eq(4).css('background-color', '#ea0d51')
                            }

                        })
                    })
                </script>


                <!-- 流行单品 -->
                <div class="popular-goods ">
                    <div class="goods-header">
                        <img src="https://s11.mogucdn.com/mlcdn/c45406/171016_56l15fdbhjddeefc1kdk55flik4eb_1125x119.jpg"
                            alt="">
                    </div>
                    <div class="goods-content">

                    </div>
                    <!-- 加载提示符 -->
                    <div class="infinite-scroll-preloader">
                        <div class="preloader"></div>
                    </div>
                </div>
                <script>
                    $(document).on('pageInit', function () {
                        // 加载flag
                        var loading = false;
                        // 最多可加载的条目
                        var maxItems = 30;
                        // 每次加载添加多少条目
                        var itemsPerLoad = 10;
                        function addItems(number, lastIndex) {
                            // 生成新条目的HTML
                            $.ajax({
                                url: './data/item.json',
                                success: function (data) {
                                    var arr = data.data.rows
                                    var str = ''
                                    for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                                        $(arr[i]).each(function (index, item) {
                                            str += `
                                            <a href="${item.h5GoodUrl}">
                                                <div><img src="${item.image}" class="bigimg"></div>
                                                <p class="goods-msg">
                                                `
                                            $(arr[i].props).each(function (index, item) {
                                                str += `<span>${item}</span>`
                                            })
                                            str +=
                                                `</p>
                                                <p class="goods-bottom">
                                                    <span class="goods-price">￥${item.price}</span>
                                                    <span class="goods-star">${item.collectNum}<img src="./tabBarImg/星星.png"></span>
                                                </p>
                                            </a>
                                        `
                                        })
                                    }
                                    // 添加新条目
                                    $('.goods-content').append(str)
                                }
                            })
                        }
                        //预先加载20条
                        addItems(itemsPerLoad, 0);
                        // 上次加载的序号
                        var lastIndex = 10;
                        // 注册'infinite'事件处理函数
                        $(document).on('infinite', '.infinite-scroll-bottom', function () {
                            // 如果正在加载，则退出
                            if (loading) return;
                            // 设置flag
                            loading = true;
                            // 模拟1s的加载过程
                            setTimeout(function () {
                                // 重置加载flag
                                loading = false;
                                if (lastIndex >= maxItems) {
                                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                                    $.detachInfiniteScroll($('.infinite-scroll-bottom'));
                                    // 删除加载提示符
                                    $('.popular-goods .infinite-scroll-preloader').remove();
                                    return;
                                }
                                // 添加新条目
                                addItems(itemsPerLoad, lastIndex);
                                // 更新最后加载的序号
                                lastIndex = $('.goods-content a').length + 10;
                                //容器发生改变,如果是js滚动，需要刷新滚动
                                $.refreshScroller();
                            }, 1000);
                        });
                    })

                </script>
            </div>

            <!-- 搜索框侧边框 -->
            <div class="panel panel-right panel-cover" id='panel-js-demo'>
                <header class="bar bar-nav header header-right">
                    <div>
                        <span class="icon icon-search" for="search"></span>
                        <input type="text" placeholder="搜索" class="search open-panel" data-panel='#panel-right'>
                        <span class="icon icon-code open-panel " data-panel='#panel-code'></span>
                    </div>
                    <a href="#"><span class="cancel close-panel">取消</span></a>
                </header>
                <div class="content-block hot-clock" style="margin: 0">
                    <div class="right-hot">
                        <p><img src="./tabBarImg/hot.png" alt="">热门搜索</p>
                        <ul>
                            <li>卫衣</li>
                            <li>外衣</li>
                            <li>毛衣</li>
                            <li>睡衣</li>
                            <li>风衣</li>
                            <li>衬衫</li>
                            <li>马甲</li>
                            <li>口红</li>
                            <li>牛仔裤</li>
                            <li>鞋子</li>
                        </ul>
                    </div>
                    <div class="right-clock">
                        <p><img src="./tabBarImg/记录.png" alt="">清除记录<span style="text-align: right">清除搜索记录</span></p>
                        <ul>
                            <li>
                                鞋子
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <script>

            </script>
            <!-- 二维码侧边框 -->
            <div class="panel panel-right panel-cover" id='panel-code'>
                <div class="bar bar-nav code-header">
                    <p>
                        <img src="./tabBarImg/返回.png" alt="" class="fanhui">
                        <span>二维码</span>
                        <span class="code-right">相册</span>
                    </p>
                </div>
                <div class="code-content">

                </div>
            </div>
            <script>
                $(function () {
                    $(document).on("click", ".fanhui", function () {
                        $.closePanel('#panel-code')
                    });
                })
            </script>

        </div>

    </div>

    <!-- Services Popup -->
    <link rel="stylesheet" href="./css/pop.css">
    <div class="popup popup-about">
        <header>
            <a class="icon icon-left pull-left close-popup" style="color:#909090;"></a>
            <h1 class="">登录</h1>
            <a class="icon pull-right alertClick" style="padding-top: 6px;">.&nbsp;.&nbsp;.&nbsp;</a>
        </header>
        <script>
            $(function () {
                $('.icon-left').on('click', function () { })
            })
        </script>
        <div class="content-block">
            <form>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">美丽说账号</div>
                        <div class="item-input">
                            <input type="text" name="name" placeholder="邮箱/昵称/手机" autofocus>
                            <a href="#" class="clearVal"><img src="./tabBarImg/叉号.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">密码</div>
                        <div class="item-input">
                            <input name="psw" type="password" placeholder="输入密码">
                            <a href="#" class="clearVal"><img src="./tabBarImg/叉号.png" alt=""></a>
                            <a href="#" class="showPsw"><img src="./tabBarImg/眼睛.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">翻转至正确方向<a class="pull-right pink changeImg">换一组</a></div>
                        <div class="item-code">
                            1234
                        </div>
                    </div>
                </div>
                <div class="col-100"><a href="#" class="button button-big">登录</a></div>
            </form>
            <div class="reg">
                <a href="">海外手机</a>
                <a href="">免密登录</a>
                <a href="" class="pink open-register">注册账号</a>
            </div>

        </div>
        <div class="footer">
            <div class="or">
                <span>OR</span>
                <hr>
            </div>
            <div class="log">
                <a href="" class="confirm-ok">
                    <img src="./tabBarImg/微信.png" alt="">
                </a>
                <a href="" class="confirm-wb">
                    <img src="./tabBarImg/微博.png" alt="">
                </a>
            </div>
        </div>

    </div>
    <script>
        $(function () {
            $('.icon-message').click(function () {
                console.log('111')
                $.popup('.popup-about');
            })
            $('.icon-left').click(function () {
                console.log('111')
                $.closeModal('.popup-about')
            })
            $(document).on('input', 'input[name=name]', function () {
                if ($(this).val() == '' || $(this).val() == null) {
                    $('.clearVal').eq(0).css('display', 'none')
                } else {
                    $('.clearVal').eq(0).css('display', 'block')
                }
            })
            $(document).on('input', 'input[name=psw]', function () {
                if ($(this).val() == '' || $(this).val() == null) {
                    $('.clearVal').eq(1).css('display', 'none');
                    $('.showPsw').eq(0).css('display', 'none');
                } else {
                    $('.clearVal').eq(1).css('display', 'block');
                    $('.showPsw').eq(0).css('display', 'block');
                }
            })
            $(document).on('input', 'input[name=country]', function () {
                if ($(this).val() == '' || $(this).val() == null) {
                    $(this).next().css('display', 'none')
                } else {
                    $(this).next().css('display', 'block')
                }
            })
            $(document).on('input', 'input[name=tel]', function () {
                if ($(this).val() == '' || $(this).val() == null) {
                    $(this).next().css('display', 'none')
                } else {
                    $(this).next().css('display', 'block')
                }
            })
            //登录框清除事件
            $(document).on('click', '.clearVal', function (e) {
                var tagC = e.target.parentElement.parentElement.children[0];
                tagC.value = '';
                tagC.focus();
                $('.clearVal').css('display', 'none');
                $('.showPsw').css('display', 'none');
            })
            var isClick = true;
            $(document).on('click', '.showPsw', function (e) {
                var tagC = e.target.parentElement.parentElement.children[0];
                if (isClick) {
                    tagC.type = 'text';
                    $('.showPsw img').attr('src', './tabBarImg/眼睛 (1).png')
                } else {
                    tagC.type = 'password';
                    $('.showPsw img').attr('src', './tabBarImg/眼睛.png')
                }
                isClick = !isClick;
            })
            // 登录验证码
            // item-code
            var imgStr = '';
            var angleRandom = [];
            var imgRandom = [];
            for (var i = 0; i < 4; i++) {
                angleRandom = Math.ceil(Math.random() * 4) * 90;
                console.log('angleRandom:', angleRandom);
                imgRandom = Math.ceil(Math.random() * 6);
                console.log('imgrandom:', imgRandom);
                imgStr += `<div class="codeImg">
             <img src="./tabBarImg/${imgRandom}.jpg" 
             style="transform: rotate(${angleRandom}deg)" id="${angleRandom}">
         </div>`
            }
            // console.log(angleRandom, imgRandom);
            $('.item-code').html(imgStr)
            // 换一组
            $(document).on('click', '.changeImg', function () {
                for (var i = 0; i < 4; i++) {
                    imgRandom = Math.ceil(Math.random() * 7);
                    $('.codeImg img').eq(i).attr('src', `./tabBarImg/${imgRandom}.jpg`);
                }

            })
            // 旋转图片
            $(document).on('click', '.codeImg img', function () {
                var angle = $(this).attr('id');
                // console.log(angle);
                var te = angle * 1 + 90;
                $(this).css({
                    'transform': 'rotate(' + te + 'deg)'
                })
                $(this).attr('id', te);
                // console.log('te:', te);
                if ($('.codeImg img').eq(0).attr('id') % 360 == 0 && $('.codeImg img').eq(1).attr('id') % 360 == 0 && $('.codeImg img').eq(2).attr('id') % 360 == 0 && $('.codeImg img').eq(3).attr('id') % 360 == 0) {
                    $.toast('验证成功')
                }
            })

        })

        $(document).on("pageInit", function () {
            // 打开微信 
            $(document).on('click', '.confirm-ok', function () {
                console.log(111)

                $.confirm('Are you sure?',
                    function () {
                        $.alert('You clicked Ok button');
                    },
                    function () {
                        $.alert('You clicked Cancel button');
                    }
                );
            });

            // 打开 微博
            $(document).on('click', '.confirm-wb', function () {
                console.log(222)
                $.alert('将为您打开微博，请稍后...');
            });
        });

    </script>
</body>
<script>
    $.init()
</script>

</html>